/**
 * Created by liuzengrong on 2019/8/16.
 */
import React from 'react';
import { connect } from 'dva';
import { message, Button } from 'antd';
import StandardModule from '@/components/hyperspace/modules/StandardModule';
import CostList from '../../../components/Business/costList';

let costList: any = {};

/**
 * 自定义模块
 */
// @ts-ignore
const LocalModule: React.FC = ({ standardModuleExample, dispatch }) => (
  <div>
    <StandardModule
      data={standardModuleExample.data}
      config={{
        common: {
          formItemOptions: {
            username: {
              rules: [{ required: true, message: '该字段不能为空！' }],
            },
          },
        },
        search: {
          fields: ['costObject', 'costSubject', 'costType'], // 查询条件
          tabs: {
            field: 'status',
            tabItems: [
              {
                title: '全部',
                value: '',
                active: true,
              },
              {
                title: '待审核',
                value: 'TO_AUDIT',
              },
              {
                title: '审核通过',
                value: 'AUDIT_PASS',
              },
              {
                title: '审核失败',
                value: 'AUDIT_FAIL',
              },
            ],
          }, // 状态栏
        },
        list: {
          url: '/api/receivabale/query',
          fields: [
            'id',
            'seqNo',
            'costObject',
            'total',
            'creator',
            'creatTime',
          ], // 列表字段
          format: {
            username: {
              render: (value: any) => `格式化 - ${value}`,
            },
          },
          extensions: {
            operations: [
              (record: any) => (
                <a
                  onClick={() => {
                    costList.handleOpen();
                  }}
                >
                  费用明细
                </a>
              ),
              (record: any) => (
                <a
                  onClick={() => {
                    message.info(`审核：${JSON.stringify(record)}`);
                  }}
                >
                  审核
              </a>
              ),
              (record: any) => (
                <a
                  onClick={() => {
                    message.info(`审核：${JSON.stringify(record)}`);
                  }}
                >
                  撤销
                </a>
              )
            ],
          },
        },
        add: {
          url: '/api/receivabale/create',
          // width: 680, // 非必填，默认680px
          // title: '新建表单', // 非必填，默认`新建`
          fields: [
            'costObject',
            'costSubject',
            'costType',
            'currency',
            'singlePrice',
            'number',
            'rate',
          ], // 新增表单字段
        },
        update: {
          url: '/api/receivabale/update',
          // width: 680, // 非必填，默认680px
          // title: '新建表单', // 非必填，默认`新建`
          fields: [
            'costObject',
            'costSubject',
            'costType',
            'currency',
            'singlePrice',
            'number',
            'rate',
          ], // 修改表单字段
          primaryKeys: ['id'], // 主键字段列表
        },
        delete: {
          url: '/api/receivabale/remove',
          batchDelete: true, // 是否开启批量删除
          fields: ['id'], // 删除依据字段
          batchDeleteUrl: '/api/receivabale/batchDelete',
        },
        extensions: {
          operations: [
            // 外层操作
            (selectedRows: [], search: () => void) => (
              <Button
                key={1}
                style={{ marginLeft: 8 }}
                onClick={() => {
                  message.info(`批量审核：${JSON.stringify(selectedRows)}`);
                  search();
                }}
              >
                批量审核
            </Button>
            ),
          ],
        },
      }}
      namespace="standardModuleExample"
      dispatch={dispatch}
    />
    <CostList
      wrappedComponentRef={(inst: any) => {
        costList = inst;
        return costList;
      }}
      {...costList}
    />
  </div >
);

// @ts-ignore
export default connect(({ standardModuleExample }) => ({
  standardModuleExample,
}))(LocalModule);
